/* 公司列表 */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import { Button, Spin, Form, Input, Table, DatePicker, Modal, Select,message } from 'antd'
import City from '../../components/city.js'
import RelatedStaff from '../../components/relatedStaff.js'
import ShowBigImg from '../../components/showBigImg'
/* 引用接口文档路径 */
import {
    companyListSelect,companyListInfo,companyHandle
} from 'actions/companyManage'

import '../../style/userControl.less'

import ModalAddCompanyList from './addCompanyListModal.js';


const FormItem = Form.Item
@Form.create({})
//abc
@connect(
  (state, props) => ({
    config: state.config,
    userInfoList: state.userInfoList,
  })
)
export default class app extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list:"",//基础数据列表
      modalList:"",//列表内容详情
      addModalFlg:false,//查看详情公司弹窗
      provinceid:"",
      relatedStaffType:"",//关联员工弹窗的类型 1关联 2解绑
      relatedStaffModal:false,//关联员工弹窗
      relatedStaffId:"",//关联员工-公司ID
      addCompanyFlg:"",//新增公司弹窗
      showBigImgModal:false,//查看大图的弹窗
      imgArry:[],//图片数组
      imgIndex:"",//图片下标
    }
    this.keyword={"companyName":"","companyRegion":""};//搜索关键词
    this.currentNumber = 1;//当前页面
    this.pagesize = 10;//每页条数
  }
  componentDidMount() {
    this.selectList();
  }
  showBigImg(item,index){//点击查看大图
    //item 图片数组 index 点击的下标
    //单张图片
    var arry = [item];
    this.setState({
      showBigImgModal:true,
      imgArry:arry,
      imgIndex:index
    })
  }
  showBigImgModalCancel(){//关闭查看大图弹窗
    this.setState({
      showBigImgModal:false,
      imgArry:[],
      imgIndex:''
    })
  }
  selectFn(){//点击搜索按钮
    this.keyword = {
      "companyName":this.props.form.getFieldValue('companyName'),
      "companyRegion":this.state.provinceid,
    };
    this.currentNumber=1;
    this.selectList();
  }
  selectList(pageNumber){//查询列表
    const datajson = Object.assign({"start":pageNumber||1,"end":this.pagesize}, this.keyword);
    this.currentNumber = pageNumber||1;
    this.props.dispatch(companyListSelect(
      datajson,
      (respose) => {
        this.setState({
          list: respose,
        })
    }))
  }

  // 城市选择框选中的值
  getStateprovince(provinceid){
    this.setState({
      provinceid:provinceid
    })
  }

  showInfoModal(id){//查看详情
    this.props.dispatch(companyListInfo(
        {"companyId":id},
        (respose) => {
            this.setState({
                addModalFlg: true,
                modalList:respose
            })
    }))
  }

  addModalCancel(){//关闭弹窗
    this.setState({
      addModalFlg:false
    })
  }

  Modalsubmit(id,type){//是否同意入驻
    Modal.confirm({
      content:"确定要这么操作吗？",
      onOk:()=>{
        this.props.dispatch(companyHandle(
          {"companyId":id,"statusType":type},
          (respose) => {
            message.success(respose.respMsg);
            this.addModalCancel();   
            this.selectList(this.currentNumber)
        }))
      },
      onCancel:()=>{
      }
    })    
  }

  bindStaff(id,type){
    //打开关联员工弹窗
    this.setState({
      relatedStaffType:type,
      relatedStaffModal:true,
      relatedStaffId:id
    })
  }
  relatedStaffSuccess(){
    //关联员工弹窗成功回调
    this.setState({
      relatedStaffModal:false,
      relatedStaffId:""
    },()=>{
      this.selectList();
    })
  }
  relatedStaffCancel(){
    //关联员工弹窗取消回调
    this.setState({
      relatedStaffModal:false,
      relatedStaffId:""
    })
  }

  //新增/编辑公司
  addCompany(type,id){
    //编辑的情况  带数据去组件
      if(type == 2){
        this.props.dispatch(companyListInfo({"companyId":id},
        (respose) => {
            this.setState({
            addCompanyFlg: true,
            modalList:respose,
            addModalType:type,
          })
        }))
      }else{//新增的情况
        this.setState({
          addCompanyFlg: true,
          modalList:{},
          addModalType:type,
        })
    }
  }
  //关闭新增公司弹窗
  closeAddCompany(){
    this.setState({
      addCompanyFlg: false,
    })
  }


  columns() {//表格标题
    return [
      {
        title: '公司编号',
        key: 'companyCode',
        dataIndex: 'companyCode',
        width: '10%',
      },

      {
        title: '公司图标',
        dataIndex: 'companyLogo',
        key: 'companyLogo',
        width: '10%',
        render: (text, recordId, index) => <img 
          style={{width:"80px",cursor:"pointer"}} 
          title="点击查看大图" 
          onClick={this.showBigImg.bind(this,text || require('../../images/baseImg.png'),0)} 
          src={text||require('../../images/baseImg.png')} 
        />,
      },
      {
        title: '公司名称',
        dataIndex: 'companyName',
        key: 'companyName',
        width: '10%',
      },
      {
        title: '公司类型',
        dataIndex: 'companyType',
        key: 'companyType',
        width: '10%',
      },
      {
        title: '所属地域',
        dataIndex: 'companyRegion',
        key: 'companyRegion',
        width: '10%',
      },
      {
        title: '电话号码',
        dataIndex: 'companyMobile',
        key: 'companyMobile',
        width: '10%',
      },
      {
        title: '主营产品',
        dataIndex: 'majorBusiness',
        key: 'majorBusiness',
        width: '8%',
        render: (text, recordId, index) =>
        <div>
          {
            text.map((item,i)=>{
              return(
                <span key={i}>{`${item},`}</span>
              )
            })
          }
        </div>,
      },
      {
        title: '公司招聘',
        dataIndex: 'companyRecruit',
        key: 'companyRecruit',
        width: '8%',
      },
      {
        title: '关联员工',
        dataIndex: 'companyEmployeeTotle',
        key: 'companyEmployeeTotle',
        width: '8%',
      },
      {
        title: '公司状态',
        dataIndex: 'companyStatus',
        key: 'companyStatus',
        width: '8%',
        render: (text, recordId, index) => 
        <span>{text == 1?'待入驻':(text == 2?'已入驻':'已拒绝')}</span>,
      },
      {
        title: '操作',
        width: '8%',
        render: (text, recordId, index) => 
        <div>
          <Button key="1" type="primary" size="small" onClick={this.showInfoModal.bind(this,text.id)} style={{marginRight:"5px",marginBottom:"5px"}}>查看</Button>  
          {
            text.companyStatus != 3?
            <Button key="2" type="primary" size="small" onClick={this.addCompany.bind(this,2,text.id)} style={{marginRight:"5px",marginBottom:"5px"}}>编辑</Button>  
            :''
          }
          {
            text.companyStatus == 2?
            [
              <Button key="3" type="primary" size="small" onClick={this.bindStaff.bind(this,text.id,1)} style={{marginRight:"5px",marginBottom:"5px"}}>关联</Button>,  
              <Button key="4" type="primary" size="small" onClick={this.bindStaff.bind(this,text.id,2)} style={{marginRight:"5px",marginBottom:"5px"}}>解绑</Button>
            ]                                    
            :''          
          }
        </div>,
        
      },
    ]
  }
  


  render () {
    const { getFieldDecorator } = this.props.form    
    const respData = this.state.list.respData ? this.state.list.respData : [];//刷新页面调用接口数据赋值
    const modalList = this.state.modalList.respData ? this.state.modalList.respData :[];
    const dateFormat = 'YYYY/MM/DD';
    return (
      <div className="page">
        {/* 搜索条件筛选块 */}
        <div className="searcDiv">
          <Form onSubmit={this.selectFn.bind(this)} layout="inline">
            <FormItem label="公司地域">
              {
                getFieldDecorator('companyRegion', {
                  rules: [{
                    required: false,
                  }],
                })(
                  <City province={this.state.provinceid} stateprovince={this.getStateprovince.bind(this)}/>
                )
              }  
            </FormItem>
            <FormItem label="公司名称">
              {
                getFieldDecorator('companyName', {
                  rules: [{
                    required: false,
                  }],
                })(
                  <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                )
              }  
            </FormItem>
            <Button type="primary" onClick={this.selectFn.bind(this)}>搜索</Button>
            <Button type="primary" onClick={this.addCompany.bind(this,1)}>新增</Button>
          </Form>
        </div>
        {/*数据渲染列表*/}
        <Spin spinning={false}>
          <Table
            rowKey="id" 
            columns={this.columns()}//表格标题列
            dataSource={respData.resultData}
            pagination={{ total: respData.count, current:this.currentNumber,pageSize: this.pagesize, onChange: this.selectList.bind(this)}}
            scroll={{ y: true }}
            rowClassName={(record, index) => record.companyStatus == 1 ? 'tableRed' : ''} 
          />
        </Spin>
        {/* 信息展示弹窗 */}
        <Modal
          width={"80%"}
          visible={this.state.addModalFlg}
          title="公司详情"
          onCancel={this.addModalCancel.bind(this)}
          footer={
            modalList.isAdmin==1?"":(
              modalList.companyStatus == 1 ?[
                <Button key="submit" type="primary"  onClick={this.Modalsubmit.bind(this,modalList.id,3)}>拒绝</Button>,
                <Button key="not" type="primary"  onClick={this.Modalsubmit.bind(this,modalList.id,2)}>通过</Button>
              ]
              :(modalList.companyStatus == 2 ?[
                <Button key="submit" type="primary"  onClick={this.Modalsubmit.bind(this,modalList.id,3)}>拒绝</Button>
              ]:'')
            )
          }
        >
          <ul className="joinBlackListModal">
            <li>
              <span className="title">公司名称:</span><span className="content">{modalList.companyName}</span>
            </li>
            <li>
              <span className="title">电话号码:</span><span className="content">{modalList.companyMobile}</span>
            </li>
            <li>
              <span className="title">公司类型:</span><span className="content">{modalList.companyType}</span>
            </li>
            <li>
              <span className="title">所属地域:</span><span className="content">{modalList.companyRegion}</span>
            </li>
            <li>
              <span className="title">公司图标:</span>
              <span className="content">
                <img 
                  style={{width:"80px",cursor:"pointer"}} 
                  title="点击查看大图" 
                  onClick={this.showBigImg.bind(this,modalList.companyLogo ? modalList.companyLogo :  require('../../images/baseImg.png'),0)} 
                  src={modalList.companyLogo ? modalList.companyLogo :  require('../../images/baseImg.png')} 
                />
              </span>
            </li>
            <li>
              <span className="title">营业执照:</span><span className="content">
              <img 
                  style={{width:"80px",cursor:"pointer"}} 
                  title="点击查看大图" 
                  onClick={this.showBigImg.bind(this,modalList.companyBusinessLicence ? modalList.companyBusinessLicence :  require('../../images/baseImg.png'),0)} 
                  src={modalList.companyBusinessLicence ? modalList.companyBusinessLicence :  require('../../images/baseImg.png')} 
                />
              </span>
            </li>
            <li>
              <span className="title">公司简介:</span><span className="content">{modalList.companyIntroduce}</span>
            </li>
            <li>
              <span className="title">公司主营:</span><span className="content">
                {
                  modalList.majorBusiness||[].map((item,i)=>{
                    <span key={i}>{`${item},`}</span>
                  })
                }
              </span>
            </li>
            <li>
              <span className="title">关联员工:</span><span className="content">{modalList.companyEmployee}</span>
            </li>
            <li>
              <span className="title">公司招聘:</span><span className="content">{modalList.companyRecruit}</span>
            </li>
          </ul>
        </Modal>
        {/* 新增课程 和 编辑课程 */}
        {
          this.state.addCompanyFlg?
          <ModalAddCompanyList 
            type={this.state.addModalType}
            ModalFlg={this.state.addCompanyFlg} 
            ModalCancel={this.closeAddCompany.bind(this)} 
            callback={this.selectList.bind(this)}
            content={this.state.modalList.respData ? this.state.modalList.respData : {}}
          />
        :""}
        {/* 关联员工组件调用 */}
        {
          this.state.relatedStaffModal?
          <RelatedStaff
              type={this.state.relatedStaffType}
              visible={this.state.relatedStaffModal} 
              successModal={this.relatedStaffSuccess.bind(this)}
              closeModal={this.relatedStaffCancel.bind(this)}
              companyId={this.state.relatedStaffId}
          />
          :""
        }
        {/* 查看大图的弹窗 */}
          {
          this.state.showBigImgModal?
          <ShowBigImg visible={this.state.showBigImgModal} imgArry={this.state.imgArry} imgIndex={this.state.imgIndex} closeModal={this.showBigImgModalCancel.bind(this)} />
          :""
        }
      </div>
    )
  }
}
